<template>
  <!-- 派出所报告历史 -->
  <page-container>
    <a-spin :spinning="spinning" tip="正在加载...">
      <a-card size="small">
        <div style="float: left; width: 400px">
          <a-input-group compact>
            <a-select
              style="width: 40%"
              @change="onEliminateChange"
              v-model:value="exportList.type"
              placeholder="请输入类型"
            >
              <a-select-option value=""></a-select-option>
              <a-select-option value="1">自定义报告导出</a-select-option>
              <a-select-option value="2">月报告导出</a-select-option>
            </a-select>
            <a-input-search
              style="width: 60%"
              v-model:value="exportList.name"
              @search="onEliminateChange"
              placeholder="请输入名称"
            />
          </a-input-group>
        </div>
        <div style="float: right">
          <span style="width: 70px">导出时间：</span>
          <a-space direction="vertical">
            <!-- <a-range-picker @change="pickerChange" :format="dateFormat" /> -->
            <pickers @setTime="pickerChange" />
          </a-space>
        </div>
      </a-card>
      <a-table size="small" :pagination="false" :data-source="dataSource" :columns="columns">
        <template #action="{ record }">
          <a @click="dwnload(record.id)">下载</a>
        </template>
      </a-table>
      <a-pagination
        v-if="totalCount"
        style="text-align: center; margin-top: 20px"
        show-quick-jumper
        show-size-changer
        v-model:current="exportList.page"
        :pageSize="exportList.size"
        :total="totalCount"
        @change="onChange"
        @showSizeChange="onShowSizeChange"
        :pageSizeOptions="['10', '20', '30', '50']"
      />
    </a-spin>
  </page-container>
</template>
<script lang="ts">
import { ref, onActivated } from 'vue';
import { getReportList } from '@/api/smart-tools/index';
import pickers from '@/components/s-picker/picker.vue';
interface exportItem {
  page: number;
  size: number;
  callTimeStart?: string;
  callTimeEnd?: string;
  name?: string;
  type?: string | null;
  sourceFunction: string;
}

export default {
  components: {
    pickers,
  },
  setup() {
    const url = (window as any).g.baseURL + '/report/download';
    const dateFormat = 'YYYY-MM-DD';
    const totalCount = ref<number>();
    const spinning = ref<boolean>(false);
    const exportList = ref<exportItem>({
      page: 1,
      size: 10,
      callTimeStart: '',
      callTimeEnd: '',
      name: '',
      type: null,
      sourceFunction: '2',
    });
    const dataSource = ref<any>([]);
    const columns = ref<any>([
      {
        title: '导出时间',
        width: '20%',
        dataIndex: 'createTime',
      },
      {
        title: '报告名称',
        width: '50%',
        dataIndex: 'name',
      },
      {
        title: '类型',
        width: '20%',
        dataIndex: 'type',
        customRender: ({ text }) => {
          if (text === '1' || text === null) {
            return '自定义报告导出';
          } else {
            return '月报告导出';
          }
        },
      },
      {
        title: '操作',
        width: '10%',
        slots: { customRender: 'action' },
      },
    ]);
    const reportList = async () => {
      spinning.value = true;
      const res = await getReportList(exportList.value);
      spinning.value = false;
      if (res.code === 200) {
        dataSource.value = res.data.list;
        totalCount.value = res.data.count;
      }
    };
    const dwnload = id => {
      window.location.href = url + '?id=' + id;
    };

    //时间选择器
    const pickerChange = val => {
      exportList.value.page = 1;
      exportList.value.size = 10;
      exportList.value.callTimeStart = val[0] ? val[0] : '';
      exportList.value.callTimeEnd = val[1] ? val[1] : '';
      reportList();
    };

    //分页
    const onChange = async (pageNumber: number) => {
      exportList.value.page = pageNumber;
      reportList();
    };
    const onShowSizeChange = (current: number, pageSize: number) => {
      exportList.value.page = 1;
      exportList.value.size = pageSize;
      reportList();
    };
    const onEliminateChange = () => {
      exportList.value.page = 1;
      exportList.value.size = 10;
      reportList();
    };
    onActivated(() => {
      reportList();
    });
    return {
      dataSource,
      columns,
      dwnload,
      reportList,
      exportList,
      spinning,
      totalCount,
      dateFormat,
      pickerChange,
      onChange,
      onShowSizeChange,
      onEliminateChange,
    };
  },
};
</script>
